<script lang="ts" setup>
  import { ref } from 'vue';
  import { Dayjs } from 'dayjs';
  import Button from '@sscd/button';
  import Space from '@sscd/space';
  import TimePicker from '@sscd/time-picker';
  const value = ref<Dayjs>();
  const open = ref(false);
  const open2 = ref(false);
  const handleOpenChange = (openStatus: boolean) => {
    console.log('open', openStatus);
    open.value = openStatus;
  };
  const handleClose = () => {
    open.value = false;
    open2.value = false;
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">附加内容</div>
    <div class="demo-content">
      <Space direction="vertical">
        <TimePicker v-model:value="value" v-model:open="open" @open-change="handleOpenChange">
          <template #renderExtraFooter="{ prefixCls }">
            <Button size="small" type="primary" @click="handleClose">OK {{ prefixCls }}</Button>
          </template>
        </TimePicker>
        <TimePicker v-model:value="value" v-model:open="open2">
          <template #renderExtraFooter>
            <Button size="small" type="primary" @click="handleClose">OK</Button>
          </template>
        </TimePicker>
      </Space>
    </div>
  </div>
</template>
